<!--  Copyright 2020 Zhejiang Lab and Zhejiang University. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* =============================================================
-->

<template>
  <div>
    <b-table
      striped
      hover
      responsive
      :items="reorg_tasks"
      :fields="fields"
      :current-page="currentPage"
      :per-page="perPage"
      outlined
      sort-by="started_time"
    >
      <template v-slot:cell(selected)="row">
        <b-form-checkbox
          :key="row.item.id"
          :checked="row.item.selected?'yes':'no'"
          @input="select(row.item)"
          value="yes"
          unchecked-value="no"
        ></b-form-checkbox>
      </template>
      <!-- <template v-slot:cell(tasks)="row">
        <div v-for="t in row.item.tasks" :key="t" style="white-space: nowrap;">{{t}}</div>
      </template> -->
      <template v-slot:cell(progress)="row">
        <b-form-check v-if="is_failed(row.item)">失败</b-form-check>
        <b-form-check v-else-if="row.item.progress==0">等待</b-form-check>
        <b-progress v-else
          :style="{marginTop:'7px',marginBottom:'7px', }"
          :animated="Number(row.value)!=1"
          :value="row.value"
          :max="1"
          :precision="2"
          :variant="row.item.runtime_error?'danger':'success'"
          show-progress
        ></b-progress>
      </template>

      <template v-slot:cell(url)="row">
        <div style="white-space: nowrap">

        <b-button
          variant="outline-primary"
          size="sm"
          @click="openDetailPage(row.item.id)"
          :style="style.methodBtn"
        >详情</b-button>
        <b-button
          variant="outline-danger"
          size="sm"
          :style="style.methodBtn"
          @click="deleteReorgTasks([row.item.id])"
        >删除</b-button>
        <b-button
          :disabled="Number(row.item.progress)!=1"
          :variant="Number(row.item.progress)==1? 'outline-success': 'outline-secondary'"
          size="sm"
          @click="download(row.value)"
          :style="Number(row.item.progress)==1? style.methodBtn: style.disabledMethodBtn"
        >下载</b-button>
        </div>
      </template>
    </b-table>
    <b-pagination
      v-model="currentPage"
      :total-rows="reorg_tasks.length"
      :per-page="perPage"
      align="right"
      :style="style.pagination"
    ></b-pagination>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { download, openDetailPage } from "../store/utils";

export default {
  name: "MyTasks",
  data() {
    return {
      perPage: 10,
      currentPage: 1,
      fields: [
        {
          key: "algorithms.alg_name",
          label: "算法",
          sortable: true,
          class: "text-center"
        },
        {
          key: "tasks",
          label: "任务",
          sortable: true,
          class: "text-center"
        },
        {
          key: "datasets",
          label: "数据集",
          sortable: true,
          class: "text-center"
        },
        {
          key: "created_time",
          label: "创建时间",
          sortable: true,
          class: "text-center"
        },
        {
          key: "started_time",
          label: "开始时间",
          sortable: true,
          class: "text-center"
        },
        {
          key: "completed_time",
          label: "完成时间",
          sortable: true,
          class: "text-center"
        },
        {
          key: "progress",
          label: "进度",
          class: "text-center"
        },
        {
          key: "url",
          label: "操作",
          class: "text-center table-method",
          stickyColumn: true
        }
      ],
      style: {
        pagination: {
          marginTop: "20px"
        },
        row: {
          marginTop: "20px"
        },
        methodBtn: {
          marginLeft: "5px",
          marginRight: "5px"
        },
        disabledMethodBtn: {
          marginLeft: "5px",
          marginRight: "5px",
          cursor: 'default',
        }
      }
    };
  },
  computed: {
    ...mapState("task", {
      errors: state => state.errors,
      reorg_tasks: state => state.reorg_tasks
    }),
    fieldsEditing: function() {
      var res = [{ key: "selected", label: "", class: "text-center" }];
      return res.concat(this.fields);
    }
  },
  methods: {
    ...mapMutations("task", ["createReorgTasks", "setErrors"]),
    ...mapActions("task", ["getReorgTasks", "deleteReorgTasks"]),
    is_failed(info){
      if ("state" in info && info.state=='failed')
        return true
      return false
    },
    openDetailPage,
    download
  },
  mounted() {
    this.$store.dispatch("task/getReorgTasks");
  }
};
</script>